<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/vote.js"></script>

</head>
<body>
<div id="app">

	<vote>
		<div id="vote" class="wrap">
			<h2>个人主页</h2>
			<el-container>
				<el-aside style="width: 200px">
					<el-menu >
						<el-menu-item index="2">
							<i class="el-icon-menu"></i>
							<span slot="title">我的信息</span>
						</el-menu-item>
						<el-menu-item index="3">
							<i class="el-icon-document"></i>
							<a :href=" 'myvote.html?usid=' + user.id "><span >我发起的投票</span></a>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我参与的投票</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我评论的投票</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="el-icon-setting"></i>
							<span slot="title">我关注的投票</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main>
					<el-form ref="form" label-width="80px" style="width: 300px">
						<el-form-item label="头像" style="text-align: center;cursor: pointer " >
							<el-avatar :size="100" :src="avatarUrl" @click.native="changeAvatar"></el-avatar>
							<input type="file"  ref="fileInput" style="display: none" @change="handleAvatarChange($event)">
						</el-form-item>
						<el-form-item label="邮箱">
							<el-input v-model="user.email"></el-input>
						</el-form-item>
						<el-form-item label="电话">
							<el-input v-model="user.tel"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary">修改</el-button>
							<el-button>取消</el-button>
						</el-form-item>
					</el-form>
				</el-main>
			</el-container>
		</div>
	</vote>


</div>

<script>
	var v = new Vue({
		el:"#app",
		data:{
			user:{
				id:"",
				uname:"",
				pwd:"",
				email:"",
				tel:"",
				avatar:""
			},
			votes:[],
			avatarUrl:"https://img2.baidu.com/it/u=85996889,2750756434&fm=253&fmt=auto&app=138&f=JPEG?w=324&h=324"

		},
		created(){
			axios.get("vote/user/getUser").then(res => {
				if (res.data.code == 1){
					this.user = res.data.data;
				}

				if (this.user.avatar != null && this.user.avatar != ""){
					this.avatarUrl = this.user.avatar;
				}

			})
		},
		methods:{
			handleAvatarChange(event) {
				const file = event.target.files[0];
				if (file) {
					this.avatarUrl = URL.createObjectURL(file);
					let fd = new FormData();
					fd.append("file",file);
					axios.post("upload/one/image",fd).then( res => {
						if (res.data.code == 1){
							this.$message(res.data.msg);
						}else{
							this.$alert("头像更换失败！");
						}
					})
				}
			},
			changeAvatar(){
				this.$refs.fileInput.click();
			}
		}
	})
</script>
</body>
</html>
